<template>
	<view class="detail">
		<sdc-navbar class="navbar" backText="" :title="item.title">
			<view slot="right" class="right-icon">
				<u-icon 
					name="share"
					size="34rpx"
				></u-icon>
			</view>
		</sdc-navbar>
		<s-swiper class="swiper" :item="item"></s-swiper>
		<s-description class="description" :item="item"></s-description>
		<s-food class="food" :item="item"></s-food>
		<s-content class="content" :item="item"></s-content>
		<s-footer class="footer" :item="item"></s-footer>
	</view>
</template>

<script>
	import SSwiper from './components/detail/s-swiper.vue'
	import SDescription from './components/detail/s-description.vue'
	import SFood from './components/detail/s-food.vue'
	import SContent from './components/detail/s-content.vue'
	import SFooter from './components/detail/s-footer.vue'
	export default {
		data() {
			return {
				item: {}
			};
		},
		methods:{
			loadMenu(id){
				return this.$api.menu.show({
					id
				})
				.then(res=>{
					if(res.code == 1)
						this.item = res.data
				})
			}
		},
		onLoad() {
			let id = this.$Route.query.id
			this.loadMenu(id)
		},
		components:{
			SSwiper,
			SDescription,
			SFood,
			SContent,
			SFooter
		}
	}
</script>

<style lang="scss" scoped>
	.detail{
		.navbar{
			background-color: #000000;
			.right-icon{
				padding: 0 $uni-spacing-col-base;
			}
		}
	}
</style>
